<!--  -->
<template>
	<div class="mainWrapper">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/dataExpress' }"><i class="lh fw_300 lh-seller fz_20"></i></el-breadcrumb-item>
			<el-breadcrumb-item>B端-商户</el-breadcrumb-item>
			<el-breadcrumb-item>评价管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="default" @click="exportList()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" :model="ruleForm" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item>
								<el-input class="w_80" v-model="staff_name" placeholder="接单人"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input class="w_100" v-model="staff_mobile" placeholder="手机号"></el-input>
							</el-form-item>
							<el-form-item>
								<el-autocomplete
									size="mini"
									class="w_130"
									v-model="shop_name"
									:fetch-suggestions="shopMatch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
									clearable
								></el-autocomplete>
							</el-form-item>

							<!-- 代理商 -->
							<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>

							<el-form-item>
								<el-select class="w_110" v-model="city_val" placeholder="请选择城市" @change="changeCity">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.name"
										:value="`${item.id}|${item.name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select v-model="area_arr" multiple collapse-tags placeholder="商圈">
									<el-button
										size="mini"
										type="primary"
										class="round-right all-area"
										@click="selectAllArea()"
										native-type="button"
										>{{ areaStatus ? '全选' : '取消全选' }}</el-button
									>
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="`${item.id}|${item.area_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<!-- <el-form-item>
								<el-select
									v-model="type_arr"
									placeholder="请选择岗位"
									@change="changeBtndialogtype"
									class="w_100"
									clearable
								>
									<el-option
										v-for="item in job_arr"
										:key="item.id"
										:label="item.label_name"
										:value="`${item.id}|${item.label_name}`"
									></el-option>
								</el-select>
							</el-form-item> -->
							<el-form-item class="mt">
								<el-cascader
									v-model="type_arr"
									:options="job_arr"
									:props="optionProps"
									placeholder="请选择岗位"
									@change="changeBtndialogtype"
									clearable></el-cascader>
							</el-form-item>
							<el-form-item>
								<el-select v-model="star_arr" placeholder="评价" @change="changeEvaluation" class="w_110" clearable>
									<el-option
										v-for="item in starList"
										:key="item.value"
										:label="item.star_name"
										:value="item.value"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="datetime1">
								<el-form-item prop="date1">
									<el-date-picker
										class="w_160i"
										v-model="ruleForm.start_time"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										format="yyyy-MM-dd HH:mm"
										placeholder="评价开始时间"
									>
									</el-date-picker>
								</el-form-item> </el-form-item
							>~
							<el-form-item prop="datetime2">
								<el-form-item prop="date2">
									<el-date-picker
										class="w_160i"
										v-model="ruleForm.end_time"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										format="yyyy-MM-dd HH:mm"
										placeholder="评价结束时间"
									>
									</el-date-picker>
								</el-form-item>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<!-- 表格部分 -->
					<el-table :data="evaluatList">
						<el-table-column prop="name" label="接单人" width="100px">
							<template slot-scope="{ row }">
								<span>{{ row.staff_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="contact_phone" label="手机号" width="100px">
							<template slot-scope="{ row }">
								<span>{{ row.staff_mobile }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="level" label="评价" width="150px">
							<template slot-scope="{ row }">
								<el-rate disabled :colors="colors" v-model="row.star"></el-rate>
							</template>
						</el-table-column>
						<el-table-column label="备注" min-width="150">
							<template slot-scope="{ row }">
								<span>{{ row.remark }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="agent_name" label="代理商" width="150"></el-table-column>
						<el-table-column prop="shop_name" label="店铺名称" width="210">
							<template slot-scope="{ row }">
								<span>{{ row.shop_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="shop_sn" label="任务编号" width="140px">
							<template slot-scope="{ row }">
								<el-link type="primary" @click="goTask(row)">{{ row.task_sn }}</el-link>
							</template>
						</el-table-column>
						<el-table-column prop="area_arr" label="商圈" width="110">
							<template slot-scope="{ row }">
								<span>{{ row.area_name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="岗位名称" width="110">
							<template slot-scope="{ row }">
								<span>{{ row.job_name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="评价人" width="100">
							<template slot-scope="{ row }">
								<span>{{ row.creater_name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="评价时间" width="150">
							<template slot-scope="{ row }">
								<span>{{ row.add_time }}</span>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchShopList, fetchAreaList, fetchLabelList, fetchShopAppraise } from '@/api/shop.js'
import { fetchIndustryJob } from '@/api/label.js'

export default {
	name: 'EvaluatList',
	data() {
		return {
			url: common.url,
			staff_name: '', // 接单人
			staff_mobile: '', // 手机号
			shop_name: '', // 店铺名厨
			star_arr: '',
			type_arr: '',
			job_arr: [], // 岗位标签数组
			job_type: '', // 岗位标签id
			star: 0, // 星
			remark: '', // 评价备注
			ruleForm: {
				start_time: '', //开始时间
				end_time: '' //结束时间
			},
			// 颜色设定
			colors: ['#cf2e22', '#cf2e22', '#cf2e22'],
			shop_sn: '', // 店铺sn
			evaluatList: [],
			shopList: [], // 店铺列表
			areaList: [], // 商圈列表
			starList: [
				{
					value: 1,
					star_name: '1星'
				},
				{
					value: 2,
					star_name: '2星'
				},
				{
					value: 3,
					star_name: '3星'
				},
				{
					value: 4,
					star_name: '4星'
				},
				{
					value: 5,
					star_name: '5星'
				}
			], //
			//向分页组件传值
			total: 0, //总数量
			pageNum: 1, //当前页
			pageSizeNow: 20,
			areaList: [], //区域列表
			areaStatus: true,
			cityList: [], // 城市列表
			city_val: '',
			city_id: '',
			area_arr: '', //商圈信息
			area_id: '',
			area_name: '',
			agent_id: '',
			agent_reset: 0,
			optionProps:{
				value: 'id',
				label: 'label_name'
			}
		}
	},

	computed: {
		// city_value() {
		// 	return this.city_val
		// }
	},

	watch: {
		//商圈改变
		// areaList(newValue, oldValue) {
		// 	this.getEvaluationList()
		// },
		// 城市改变
		// city_value(newVal, oldVal) {
		// if (oldVal) {
		// 	let [id, name] = oldVal.split('|')
		// 	if (id === '北京') {
		// 		id = 1
		// 	}
		// 	// 存储旧的商圈数据
		// 	this.selectedAreasMap[`city-${id}`] = this.area_arr
		// }
		// console.log('存储值', this.selectedAreasMap)
		// if (newVal && this.city_id) {
		// 	this.listArea() //商圈列表
		// }
		// }
	},

	//生命周期 - 创建完成（访问当前this实例）
	created() {
		// this.selectedAreasMap = {}
		var d = this.date()
		var e = this.date(1)
		this.ruleForm.start_time = d + ' 00:00:00'
		this.ruleForm.end_time = e + ' 23:59:00'
	},
	//生命周期 - 挂载完成（访问DOM元素）
	mounted() {},
	methods: {
		async setValue(data) {
			console.log(data)
			this.agent_id = data.agent_id

			// 清空店铺名称
			this.shop_name = ''

			this.cityList = data.city_list
			this.city_val = this.cityList[0].name
			this.city_id = this.cityList[0].id
			await this.listArea() //商圈列表
			await this.getEvaluationList()
			await this.getshopList()
			await this.alljob_type()
		},
		date(e) {
			return this.$moment().add('days', e).format('YYYY-MM-DD')
		},
		shopSelect(item) {
			this.shop_id = item.id
		},
		//获取商铺列表
		async getshopList() {
			try {
				let ret = await fetchShopList({
					sign_status: 30,
					status: 1,
					search_list: 1,
					agent_id: this.agent_id,
					city_id: this.city_id
				})

				ret.list.forEach(item => {
					item.value = item.name
				})
				this.shopList = ret.list
			} catch (error) {
				console.log('error:', error)
			}
		},

		//标签接口
		// async alljob_type() {
		// 	try {
		// 		let ret = await fetchLabelList({
		// 			label_type: 'job_type'
		// 		})
		// 		this.job_arr = ret
		// 	} catch (error) {
		// 		console.log('error:', error)
		// 	}
		// },
		//店铺匹配
		shopMatch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},

		// 选择店铺
		handleSelect(item) {
			this.shop_sn = item.shop_sn
		},
		//获取岗位
		async alljob_type() {
			this.type_arr = ''
			try {
        		let ret = await fetchIndustryJob({
					city_id: this.city_id
				})
				if(ret.length>0){
					this.job_arr = ret
				}else{
					this.job_arr = []
				}
			} catch (err) {
				console.log(err)
			}
		},
		// 选择岗位
		changeBtndialogtype() {
			// let [id, name] = this.type_arr.split('|') // es6 数组解构赋值
			this.job_type = this.type_arr[1]
			//this.label_name = name
		},
		// 选择评价
		changeEvaluation() {
			this.star = this.area_arr
		},

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.getEvaluationList()
		},

		// 获取评价列表
		async getEvaluationList() {
			try {
				let s_departmentIds_Arr = new Array()
				this.area_arr.forEach(element => {
					let [id, name] = element.split('|') // es6 数组解构赋值
					s_departmentIds_Arr.push(id.toString())
				})

				let ret = await fetchShopAppraise({
					pageSize: this.pageSizeNow, // 每页多少条
					page: this.pageNum, // 页数
					staff_name: this.staff_name,
					staff_mobile: this.staff_mobile,
					shop_sn: this.shop_sn,
					area_id: '' + s_departmentIds_Arr,
					job_type: this.job_type,
					star: this.star_arr,
					start_time: this.ruleForm.start_time,
					end_time: this.ruleForm.end_time,
					agent_id: this.agent_id
				})
				if (ret.list.length) {
					ret.list.forEach(item => {
						item.value = item.name
					})
					this.evaluatList = ret.list
					this.total = ret.count
				} else {
					this.evaluatList = []
					this.total = 0
				}
			} catch (error) {
				console.log('error:', error)
			}
		},

		// 搜索
		shearchBtn() {
			this.pageNum = 1
			this.getEvaluationList()
		},
		// 重置
		async resetBtn() {
			await this.resetData()
			await this.getEvaluationList()
		},

		async resetData() {
			this.pageNum = 1
			this.staff_name = ''
			this.staff_mobile = ''
			this.shop_sn = ''
			this.shop_name = ''
			this.star_arr = ''
			this.type_arr = ''
			this.job_type = ''
			this.ruleForm.start_time = this.date() + ' 00:00:00'
			this.ruleForm.end_time = this.date(1) + ' 23:59:00'

			// 重置代理商
			this.agent_reset += 1
		},

		// 任务详情
		goTask(row) {
			const { href } = this.$router.resolve({
				path: '/roleMain',
				query: {
					rl_id: row.demand_id,
					rl_sn: row.demand_sn,
					task_id: row.task_id,
					task_sn: row.task_sn,
					start_date: row.task_start_time.substring(0, 10)
				}
			})
			window.open(href, '_blank')
		},

		// 导出
		exportList() {
			let ruleForm_start_time = ''
			let ruleForm_end_time = ''
			if (this.ruleForm.start_time != '' && this.ruleForm.end_time != '') {
				//开始时间与结束时间必须同时存在
				ruleForm_start_time = this.ruleForm.start_time
				ruleForm_end_time = this.ruleForm.end_time
			}
			if (this.shop_name == '') {
				this.shop_sn = ''
			}

			let s_departmentIds_Arr = new Array()
			this.area_arr.forEach(element => {
				let [id, name] = element.split('|') // es6 数组解构赋值
				s_departmentIds_Arr.push(id.toString())
			})

			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				staff_name: this.staff_name,
				staff_mobile: this.staff_mobile,
				shop_sn: this.shop_sn,
				area_id: '' + s_departmentIds_Arr,
				job_type: this.job_type,
				star: this.star_arr,
				start_time: ruleForm_start_time,
				end_time: ruleForm_end_time,
				agent_id: this.agent_id,
				export: 1
			}

			let param = $.param(obj)
			window.location.href = common.url + '/shopAppraise/getList?' + param
		},
		//全选-取消全选商圈
		selectAllArea() {
			let arr = []
			this.areaList.forEach(item => {
				arr.push(`${item.id}|${item.area_name}`)
			})
			if (this.areaStatus == true) {
				this.area_arr = arr
			} else {
				this.area_arr = []
			}
			this.areaStatus = !this.areaStatus
			// this.shearchBtn()
		},
		// 监听城市val变化
		changeCity() {
			if (!this.city_val) return
			let [id, name] = this.city_val.split('|') // es6 数组解构赋值
			this.city_id = id
			this.city_name = name
			this.shop_name = ''
			this.listArea() //商圈列表
			this.getshopList()
			this.alljob_type()
		},

		// 获取商圈数据
		async listArea() {
			try {
				this.area_arr = []
				let ret = await fetchAreaList({
					city_id: this.city_id,
					agent_id: this.agent_id
				})
				ret.list.forEach(item => {
					item.value = item.area_name
				})
				this.areaList = ret.list
				// 默认选中非254-平谷的
				// this.areaList.forEach(element => {
				// 	if (element.area_name != '平谷') {
				// 		var pusharr = element.id + '|' + element.area_name
				// 		this.area_arr.push(pusharr)
				// 	}
				// })
			} catch (error) {
				console.log('error:', error)
			}
		},

		//获取商圈列表
		async listArea1() {
			this.area_arr = []
			let fn = new FormData()
			fn.append('city_id', this.city_id)
			fn.append('agent_id', this.agent_id)
			this.$http.post(this.url + '/area/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						console.log('商圈：', res.data.data.list)
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.area_name
							})
							this.areaList = res.data.data.list
							// if (this.area_arr == '' || this.area_arr == null) {
							// 	// 默认选中非254-平谷的
							// 	this.areaList.forEach(element => {
							// 		// 平谷
							// 		if (element.area_name != '平谷') {
							// 			var pusharr = element.id + '|' + element.area_name
							// 			this.area_arr.push(pusharr)
							// 		}
							// 	})
							// }
							// if (this.selectedAreasMap[`city-${city_id}`] && this.selectedAreasMap[`city-${city_id}`].length) {
							// 	this.area_arr = this.selectedAreasMap[`city-${city_id}`]
							// }
						} else {
							this.areaList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		}
	}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.mt{
	margin-top: -5px;
}
</style>



// WEBPACK FOOTER //
// src/components/evaluation/List.vue